<ng-container *ngIf="(state$ | async); let state; else loadingTemplate">
    <div class="left-column flex-column flex-shrink-0">
        <button
            (click)="toggleSearchView()"
            *ngIf="searchViewEnabled$ | async"
            class="btn btn-sm btn-primary d-flex align-items-center flex-shrink-0 mb-2"
        >
            <span class="d-flex flex-grow-1 flex-column">Search</span>
            <i class="fa fa-angle-right d-flex"></i>
        </button>
        <div class="overflow-auto">
            <ng-container
                *ngIf="state.systemFolders.length"
                [ngTemplateOutletContext]="{folders: state.systemFolders}"
                [ngTemplateOutlet]="foldersGroup"
            ></ng-container>
            <ng-container
                *ngIf="state.customFolders.length"
                [ngTemplateOutletContext]="{folders: state.customFolders}"
                [ngTemplateOutlet]="foldersGroup"
            ></ng-container>
            <ng-container
                *ngIf="state.customLabels.length"
                [ngTemplateOutletContext]="{folders: state.customLabels}"
                [ngTemplateOutlet]="foldersGroup"
            ></ng-container>
        </div>
        <ng-template
            #foldersGroup
            let-folders="folders"
        >
            <ul class="list-group">
                <li
                    (click)="selectFolder(folder)"
                    *ngFor="let folder of resolveAsFolders(folders); trackBy: trackFolder"
                    [ngClass]="{'list-group-item-warning': state.selectedFolderData.id === folder.id}"
                    class="list-group-item list-group-item-action"
                >
                    <electron-mail-db-view-folder [folder]="folder"></electron-mail-db-view-folder>
                </li>
            </ul>
        </ng-template>
    </div>
    <div class="right-column flex-row flex-grow-1">
        <div
            [ngClass]="{'flex-basis-half': state.selectedMail}"
            class="px-2 d-flex flex-column flex-grow-1"
        >
            <electron-mail-db-view-mails
                *ngIf="mailsBundleKey$ | async; let mailsBundleKey;"
                [webAccountPk]="webAccountPk"
                [mailsBundleKey]="mailsBundleKey"
                [uid]="state.selectedFolderData.id"
            >
                <div
                    class="d-flex mr-2"
                    controls
                >
                    <button
                        (click)="toggleMailsBundleKey();"
                        [disabled]="(togglingLocalDbMailsListViewMode$ | async) || false"
                        class="btn btn-sm btn-secondary"
                        title="Toggle plain/conversation view mode"
                        type="button"
                    >
                        <i
                            [ngClass]="{
                                'fa-align-right fa-flip-vertical': mailsBundleKey == 'folderConversationsBundle',
                                'fa-align-justify': mailsBundleKey == 'folderMailsBundle'
                            }"
                            [ngStyle]="{'margin-top': (mailsBundleKey == 'folderConversationsBundle' ? -0.2 : 0.1) + 'rem'}"
                            class="fa d-flex"
                        ></i>
                    </button>
                </div>
            </electron-mail-db-view-mails>
        </div>
        <div
            *ngIf="state.selectedMail"
            class="flex-basis-half pr-2 d-flex flex-column"
        >
            <electron-mail-db-view-mail-body
                [webAccountPk]="webAccountPk"
                [selectedFolderData]="state.selectedFolderData"
            ></electron-mail-db-view-mail-body>
        </div>
    </div>
</ng-container>
<ng-template #loadingTemplate>
    <div class="progress d-flex flex-grow-1 mr-2">
        <div
            class="progress-bar progress-bar-striped progress-bar-animated bg-secondary"
            style="width: 100%"
        >
            Data loading ...
        </div>
    </div>
</ng-template>
<electron-mail-db-view-mails-search
    (backToListHandler)="toggleSearchView()"
    *ngIf="searchView"
    [webAccountPk]="webAccountPk"
></electron-mail-db-view-mails-search>
